<template>
  <div class="role">
    <div class="search">
      <el-form ref="searchData" :model="searchData" :inline="true" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称">
          <el-input v-model="searchData.sysRoleName" />
        </el-form-item>
        <el-form-item label="角色状态" prop="region">
          <el-select v-model="searchData.disabledFlag" placeholder="请选择状态">
            <el-option label="已启用" value="0" />
            <el-option label="已禁用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('searchData')">查询</el-button>
          <el-button @click="resetForm('searchData')">重置</el-button>
        </el-form-item>
        <el-button type="success" v-if="buttons.add" @click="roleAdd()">新增</el-button>
      </el-form>
    </div>
    <div class="data">
      <el-table :data="tableData" size="medium " border style="width: 100%">
        <el-table-column label="角色名称" width="180" align="center">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span size="medium">{{ scope.row.sysRoleName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="角色类型" width="180" align="center">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag v-if="scope.row.sysRoleType==-1" size="medium" type="danger" round>超级管理员</el-tag>
              <el-tag v-if="scope.row.sysRoleType==0" size="medium" type="warning" round>管理员</el-tag>
              <el-tag v-if="scope.row.sysRoleType==1" size="medium" type="success" round>普通管理员</el-tag>
              <el-tag v-if="scope.row.sysRoleType==2" size="medium" type="info" round>普通员工</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="180" align="center">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag v-if="scope.row.disabledFlag!=null && scope.row.disabledFlag==0" type="success" round>已启用</el-tag>
              <el-tag v-if="scope.row.disabledFlag!=null && scope.row.disabledFlag==1" type="danger" round>已禁用</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="200" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button-group>
              <el-button v-if="scope.row.editButtonShow && buttons.edit && buttons.edit" size="mini" round :loading="loadingEdit.loading && scope.row.uuid===loadingEdit.uuid" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button v-if="scope.row.authorButtonShow && buttons.aclShow" size="mini" type="danger" round :loading="loadingAuthor.loading && scope.row.uuid===loadingAuthor.uuid" @click="handleAclsToRole(scope.$index, scope.row)">授权</el-button>
              <el-button v-if="scope.row.disabledFlagButtonShow && scope.row.disabledFlag===1 && buttons.status" size="mini" type="danger" round :loading="openLoading.loading && scope.row.uuid===openLoading.uuid" @click="handleOpen(scope.$index, scope.row)">启用</el-button>
              <el-button v-if="scope.row.disabledFlagButtonShow && scope.row.disabledFlag===0 && buttons.status" size="mini" type="warning" round :loading="closeLoading.loading && scope.row.uuid===closeLoading.uuid" @click="handleClose(scope.$index, scope.row)">禁用</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        :current-page="searchData.currentPage"
        :page-sizes="[20,50 , 100,200, 300, 400]"
        :page-size="searchData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!--组件-->
    <role-add :role-add-to-child="roleAddToChild" @roleAddToFather="roleAddToFather" />
    <role-modify :role-modify-to-child="roleModifyToChild" @roleModifyToFather="roleModifyToFather" />
    <acls-to-role :acls-to-role-to-child="aclsToRoleToChild" @roleModifyToFather="roleModifyToFather" />
  </div>
</template>

<script>
import { roleList, showRole, status, roleHaveAclTree } from '@/api/momo/SysRole'
import RoleAdd from './component/RoleAdd'
import RoleModify from './component/RoleModify'
import AclsToRole from './component/AclsToRole'
export default {
  name: 'RoleList',
  components: { RoleAdd, RoleModify, AclsToRole },
  data() {
    return {
      searchData: {
        sysUserName: '',
        currentPage: 1,
        pageSize: 20,
        total: 0,
        disabledFlag: null
      },
      tableData: [],
      roleModifyToChild: {},
      aclsToRoleToChild: {},
      roleAddToChild: '',
      loadingEdit: {
        loading: false,
        uuid: ''
      },
      loadingAuthor: {
        loading: false,
        uuid: ''
      },
      openLoading: {
        loading: false,
        uuid: ''
      },
      closeLoading: {
        loading: false,
        uuid: ''
      },
      buttons: {
        aclAuthor: false,
        add: false,
        edit: false,
        detail: false,
        aclShow: false,
        status: false
      }
    }
  },
  created() {
    this.loadSysRoleList()
    if (this.$route.meta.buttons) {
      this.buttons = Object.assign(this.buttons, this.$route.meta.buttons)
    }
  },
  methods: {
    handleAclsToRole(index, row) {
      this.showLoadingAuthor(row.uuid)
      roleHaveAclTree(row).then(res => {
        res = res.data
        res.roleUuid = row.uuid
        res.sysRoleName = row.sysRoleName
        this.showLoadingAuthor()
        this.aclsToRoleToChild = res
      }).catch(errored => {
        this.showLoadingAuthor()
      })
    },
    roleModifyToFather(data) {
      this.loadSysRoleList()
    },
    roleAdd() {
      this.roleAddToChild = '' + Math.random()
    },
    roleAddToFather(data) {
      this.loadSysRoleList()
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val
      this.loadSysRoleList()
    },
    handleCurrentChange(val) {
      this.searchData.currentPage = val
      this.loadSysRoleList()
    },
    handleEdit(index, row) {
      this.showLoadingEdit(row.uuid)
      showRole(row).then(res => {
        res = res.data
        this.showLoadingEdit()
        this.roleModifyToChild = res
      }).catch(errored => {
        this.showLoadingEdit()
      })
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    submitForm(formName) {
      this.loadSysRoleList()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    loadSysRoleList() {
      roleList(this.searchData).then(res => {
        res = res.data
        this.tableData = res.list
        this.searchData.total = res.total
        this.searchData.currentPage = res.currentPage
        this.searchData.pageSize = res.pageSize
      })
    },
    handleOpen(index, row) {
      this.showOpenLoading(row.uuid)
      this.$confirm('是否启用', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.disabledFlag = 0
        status(row).then(res => {
          this.showOpenLoading()
          this.$message({
            type: 'success',
            message: res.data
          })
        })
      }).catch(() => {
        this.showOpenLoading()
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleClose(index, row) {
      this.showCloseLoading(row.uuid)
      this.$confirm('是否禁用?', '提示', {
        confirmButtonText: '禁用',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.showCloseLoading()
        row.disabledFlag = 1
        status(row).then(res => {
          this.$message({
            type: 'success',
            message: res.data
          })
        })
      }).catch(() => {
        this.showCloseLoading()
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    showLoadingEdit(uuid) {
      if (uuid === null || uuid === undefined) {
        this.loadingEdit.loading = false
        this.loadingEdit.uuid = ''
        return false
      } else {
        this.loadingEdit.loading = true
        this.loadingEdit.uuid = uuid
        return true
      }
    },
    showLoadingAuthor(uuid) {
      if (uuid === null || uuid === undefined) {
        this.loadingAuthor.loading = false
        this.loadingAuthor.uuid = ''
        return false
      } else {
        this.loadingAuthor.loading = true
        this.loadingAuthor.uuid = uuid
        return true
      }
    },
    showCloseLoading(uuid) {
      if (uuid === null || uuid === undefined) {
        this.closeLoading.loading = false
        this.closeLoading.uuid = ''
      } else {
        this.closeLoading.loading = true
        this.closeLoading.uuid = uuid
      }
    },
    showOpenLoading(uuid) {
      if (uuid === null || uuid === undefined) {
        this.openLoading.loading = false
        this.openLoading.uuid = ''
      } else {
        this.openLoading.loading = true
        this.openLoading.uuid = uuid
      }
    }
  }
}
</script>

<style scoped>
  .role{
    background-color: #fff;
    margin: 2px 5px;
    border-radius: 5px;
  }
  .search{
    padding-top: 20px;
  }
  .data{
    padding-left: 2px;
    padding-right: 2px;
  }
  .page{
    margin-top: 20px;
    padding-bottom: 20px;
  }
</style>
